<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-svg</title>
  <style>
    svg {
      width: 1200px;
      height: 600px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <svg>
    <polyline points="100 100, 200 200, 300 200, 400 300, 500 200, 600, 200, 700 100"
      style="stroke: #fff;stroke-width: 5px;"></polyline>

    <!-- 矩形 -->
    <rect x="10" y="10" width="20" height="20" style="stroke:#fff; fill: cyan;"></rect>

    <!-- 圆形 -->
    <circle cx="50" cy="20" r="10" style="fill: purple; stroke: red; stroke-width: 5px; stroke-opacity: .5;"></circle>
  </svg>

  <script>

  </script>
</body>

</html>